<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="commentList"
      :pagination="false"
      :rowKey="(record) => record.id"
    >
      <span slot="customTitle">评论id</span>
      <span slot="pic" slot-scope="text, record">
        <img
          style="width:100px;height:100px;border-radius: 50%;
      box-shadow: 2px 2px 5px #333333;"
          :src="record.userAvatar"
        />
      </span>
      <span slot="action">
        <a-button
          type="danger"
          style="margin-right:8px"
          icon="delete"
          @click="del"
          >删除</a-button
        >
      </span>
    </a-table>
    <div class="bottom">
      <a-pagination
        class="pageTab"
        show-quick-jumper
        :current="current"
        :page-size-options="pageSizeOptions"
        :total="commentNum"
        :show-total="(total) => `共 ${commentNum} 条评论`"
        :page-size="limit"
        :default-current="1"
        show-size-changer
        @showSizeChange="onShowSizeChange"
        @change="pageChange"
      />
    </div>
    <a-modal
      centered
      title="删除评论"
      v-model="isDel"
      @ok="delOk"
      @cancel="cancel"
    >
      <p>确定删除这条评论吗？(此操作不可逆噢～)</p>
    </a-modal>
    <a-modal
      centered
      title="删除评论"
      v-model="isDelAll"
      @ok="delAllOk"
      @cancel="cancel"
    >
      <p>确定删除选中评论吗？(此操作不可逆噢～)</p>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment';
// import HeadInfo from "../../components/tool/HeadInfo";
// import {blogListApi} from '@/services/blog'
import { mapGetters } from 'vuex';
// import { superAdminCommentApi } from '@/services/superAdmin';
import { getCommentApi, delCommentApi } from '@/services/blogApi/comment';
export default {
  data() {
    return {
      columns: [
        {
          title: '评论id',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '博客id',
          dataIndex: 'blogId',
          key: 'blogId',
        },
        {
          title: '评论人',
          dataIndex: 'userName',
          key: 'userName',
        },
        {
          title: '用户头像',
          dataIndex: 'userAvatar',
          key: 'userAvatar',
          scopedSlots: { customRender: 'pic' },
        },
        {
          title: '评论内容',
          dataIndex: 'content',
          key: 'content',
        },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          key: 'createdAt',
        },
        {
          title: '最近更新',
          dataIndex: 'updatedAt',
          key: 'updatedAt',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      isDelAll: false,
      isDel: false,
      commentNum: 0,
      pageSizeOptions: ['5', '10', '15', '20', '25'],
      delList: [],
      current: 1,
      limit: 5,
      commentList: [],
      list: [],
      idList: [],
      projectId: 0,
      commentId: 0,
      blogId: 0,
    };
  },
  computed: {
    ...mapGetters('account', ['user']),
  },
  async created() {
    this.projectId = this.user.project_id;
    this.getCommentLIst(this.limit, 0);
  },
  methods: {
    delAllOk() {
      this.commentList.filter((ele) => (ele.id = 56));
      this.isDelAll = false;
      this.selectedRowKeys = [];
    },
    cancel() {
      this.isDel = false;
      this.isDelAll = false;
    },
    delAll() {
      this.isDelAll = true;
      this.checkDel(this.selectedRowKeys, this.delList);
    },
    del(e) {
      this.isDel = true;
      let tr = e.target.parentNode.parentNode.parentNode;
      this.commentId = tr.children[0].innerHTML - 0;
      this.blogId = tr.children[1].innerHTML - 0;
    },
    async delOk() {
      await delCommentApi({
        commentId: this.commentId,
        blogId: this.blogId,
        projectId: this.projectId,
      }).then(() => {
        this.$message.success('成功删除', 1);
        (this.commentId = 0), (this.blogId = 0);
      });
      this.current = 1;
      this.getCommentLIst(this.limit, 0);
      this.isDel = false;
    },
    async getCommentLIst(limit, offset) {
      if (this.user.type === '2') {
        let res = await getCommentApi({
          limit,
          offset,
          projectId: this.projectId,
        });

        this.commentList = res.data.rows;
        this.commentList.forEach((ele) => {
          ele.createdAt = moment(ele.createdAt).format('YYYY-MM-DD  HH:mm:ss');
          ele.updatedAt = moment(ele.updatedAt).format('YYYY-MM-DD  HH:mm:ss');
        });
        this.commentNum = res.data.count;
        this.delList = this.commentList.map((ele) => {
          return {
            commentId: ele.id,
            blogId: ele.blogId,
          };
        });
      } else {
        // let res = await superAdminCommentApi({
        //   limit,
        //   offset,
        // });
        // this.commentList = res.data.rows;
        // this.commentList.forEach((ele) => {
        //   ele.createdAt = moment(ele.createdAt).format('YYYY-MM-DD  HH:mm:ss');
        //   ele.updatedAt = moment(ele.updatedAt).format('YYYY-MM-DD  HH:mm:ss');
        // });
        // this.commentNum = res.data.count;
        // this.delList = this.commentList.map((ele) => {
        //   return {
        //     commentId: ele.id,
        //     blogId: ele.blogId,
        //   };
        // });
      }
    },
    // 改变每页展示数量
    onShowSizeChange(current, pageSize) {
      this.limit = pageSize;
      this.pageChange(current);
    },
    /*
        不应该一次性请求所有文章，采用分页懒加载
      */
    pageChange(current) {
      this.current = current;

      let offset = (this.current - 1) * this.limit;
      this.getCommentLIst(this.limit, offset);
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
</style>
